<template>
  <el-config-provider :size="size" :z-index="zIndex" :locale="currentLocale">
    <router-view v-if="routeLoaded" />
  </el-config-provider>
</template>

<script lang="ts" setup>
/**
 * @author yinyuejia
 * @file 应用级文件
 */
import { ElConfigProvider } from 'element-plus';
import { ref, computed, nextTick, provide } from 'vue';
import { useStore } from 'vuex';
import { localeList } from '@/locale/index';

const store = useStore();
const zIndex = computed(() => store.state.theme.zIndex);
const size = computed(() => store.state.theme.size || '');
const currentLocaleKey = computed(() => store.state.locale.key);
const currentLocale = computed(() => localeList.find((a: any) => a.key === currentLocaleKey.value).locale);
const routeLoaded = ref(true);
const reload = function () {
  routeLoaded.value = false;
  nextTick().then(() => {
    routeLoaded.value = true;
  });
};
provide('reload', reload);
</script>

<style lang="scss">
@import '@/assets/css/base.scss';
</style>
